<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS3内嵌式打字机特效</title>
  <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    :root{
        font-size: 20px;
        background: #57606f;
    }
    body{
        color: #2f3542;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }
    .wapper{
      position: relative;
    }
    .wapper h1{
        /*等宽字体*/
        font-family: Consolas;
        font-size: 6rem;
        /* ch 一个字符*/
        width: 1ch;
        overflow: hidden;
        /*保留空格，不换行*/
        white-space: nowrap;
        animation: typewriter 2s steps(18) forwards;
        /*内嵌效果*/
        text-shadow: 0 1px 0 #fff;
    }
    @keyframes typewriter {
        40%,50%{width: 9ch;}
        60%,70%{width: 12ch}
        100%{width: 18ch;}
    }
    .wapper .pointer{
      position: absolute;
        width: 20px;
        height: 100%;
        background: #2f3542;
        right: -2rem;
        top: 0;
        /* jump-start start jump-end end jump-none*/
        animation: pointer 1s steps(2,jump-none) infinite;
        animation-delay: 2s;
    }
    @keyframes pointer {
        to{opacity: 0}
    }
  </style>
</head>
<body>
  <div class="wapper">
    <h1>BiliBili CSS Study</h1>
    <span class="pointer"></span>
  </div>
</body>
</html>